<template>
  <section class="config-home">
    <!-- 首页logo配置 -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页logo设置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_HOME_LOGO.updateTime ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_HOME_LOGO.updateTime : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <el-form :model="homeConfig.APP_HOME_LOGO" label-position="right" label-width="10px">
              <el-form-item label>
                <image-cropper
                  v-model="homeConfig.APP_HOME_LOGO.configValue"
                  :preview-id="upload4applogo.viewId"
                  :width="464"
                  :view="upload4applogo.view"
                  :height="64"
                  :url="upload4applogo.uploadaction"
                  :no-circle="true"
                  :no-rotate="false"
                  :show-tip="false"
                  :default-image="upload4applogo.default"
                  :is-sign="true"
                  :sign-img-src="upload4applogo.signImgSrc"
                  lang-type="zh"
                  @changeImg="upload4applogo.change"
                />
                <section class="inner-explain">
                  <i class="el-icon-warning-outline" />
                  <section>
                    <p>
                      1、自定义职工端首页左上角的系统logo。请上传尺寸为的464px*64px图片。图片格式为jpg、png。
                    </p>
                    <p>2、Logo中应包含职工端系统名称。</p>
                  </section>
                </section>
              </el-form-item>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 金刚区 -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页金刚区入口设置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_HOME_MENU.updateTime ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_HOME_MENU.updateTime : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <section class="inner-txt">
              <el-tag>自定义职工端首页金刚区入口展示项和顺序。可通过鼠标拖动进行调整。 </el-tag>
            </section>
            <section class="inner-draggable">
              <v-draggable
                :key="1"
                :number="7"
                :list="homeConfig.APP_HOME_MENU.configValue"
                :group="'homemenu'"
                class="draggable-item"
                header-text="入口设置"
                :show-del="true"
                @edit="handleEdit"
                @delete="deleteInlet"
              />
            </section>
            <div style="text-align: center">
              <el-button
                v-if="homeConfig.APP_HOME_MENU.configValue.length < 8"
                type="primary"
                style="margin: 10px auto"
                @click="addInlet('homemenu')"
              >添 加
              </el-button>
              <el-button
                :loading="loadingAndUpdateTimeInfo.APP_HOME_MENU.loading"
                type="primary"
                style="margin: 10px auto"
                @click="handleComit('APP_HOME_MENU')"
              >确 定
              </el-button>
            </div>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 职工端首页直播配置-->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页直播配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_LIVE_BOOK_CONTENT.updateTime
                ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_LIVE_BOOK_CONTENT.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <div class="course-category-add" @click=";(visible4Choose = true), (chooseType = 'live')">
              添加直播
            </div>
            <el-form style="margin-top: 20px" :model="homeConfig.APP_LIVE_BOOK_CONTENT" label-position="right" label-width="130px">
              <el-table :data="homeConfig.APP_LIVE_BOOK_CONTENT.configValue" stripe style="width: 100%">
                <el-table-column prop="name" label="直播名称" />
                <el-table-column prop="type" label="类型">
                  <template slot-scope="score">
                    <span>{{ score.row.type === '1' ? '系统内' : '系统外' }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="60" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleDeleteIndex4Type(scope, 'live')">删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                :loading="loadingAndUpdateTimeInfo.APP_LIVE_BOOK_CONTENT.loading"
                style="display: block; margin: 10px auto"
                type="primary"
                @click="handleComit('APP_LIVE_BOOK_CONTENT')"
              >确 定
              </el-button>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 职工端新闻分类配置   -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端新闻分类配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_NEW_CLASSIFY_NAME.updateTime
                ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_NEW_CLASSIFY_NAME.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <el-form label-position="right" label-width="130px">
              <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="classifyName" label="分类名称" />
                <el-table-column prop="indexStatus" label="首页是否展示—排序">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.indexStatus" />
                    <el-tooltip class="item" effect="dark" content="排序为越大越靠前" placement="top">
                      <el-input-number v-model="scope.row.indexSort" placeholder="排序为越大越靠前" :controls="false" />
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="listStatus" label="列表是否展示—排序">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.listStatus" />
                    <el-tooltip class="item" effect="dark" content="排序为越大越靠前" placement="top">
                      <el-input-number v-model="scope.row.listSort" placeholder="排序为越大越靠前" :controls="false" />
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                :loading="loadingAndUpdateTimeInfo.APP_NEW_CLASSIFY_NAME.loading"
                style="display: block; margin: 10px auto"
                type="primary"
                @click="handleComit('APP_NEW_CLASSIFY_NAME')"
              >确 定
              </el-button>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 职工端首页课程分类九宫格配置   -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页课程分类九宫格配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_COURSE_CATEGORY_9.updateTime
                ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_COURSE_CATEGORY_9.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <course-classify-tree
            v-if="visible4coursetree9"
            key="coursetree9"
            :checked="homeConfig.APP_COURSE_CATEGORY_9.configValue"
            :origin="addCourseOrigin"
            @close="visible4coursetree9 = false"
            @success="setCourseCategory9"
          ></course-classify-tree>
          <section class="card-inner" width="50%">
            <el-row :gutter="20" class="select-course-category">
              <el-col :span="24">
                <div
                  v-if="homeConfig.APP_COURSE_CATEGORY_9.configValue.length < 9"
                  class="course-category-add course"
                  @click=";(addCourseOrigin = 'company'), (visible4coursetree9 = true)"
                >
                  添加本单位课程分类
                </div>
                <div
                  v-if="homeConfig.APP_COURSE_CATEGORY_9.configValue.length < 9"
                  class="course-category-add course"
                  @click=";(addCourseOrigin = 'saas'), (visible4coursetree9 = true)"
                >
                  添加平台课程分类
                </div>
              </el-col>
              <draggable
                v-model="homeConfig.APP_COURSE_CATEGORY_9.configValue"
                :animation="340"
                handle=".course-category-move"
                draggable=".drag-item"
              >
                <el-col v-for="(item, index) in homeConfig.APP_COURSE_CATEGORY_9.configValue" :key="index" class="drag-item" :span="8">
                  <el-input v-model="item.classifyName" placeholder="请输入内容">
                    <el-button slot="prepend" class="course-category-move" icon="el-icon-rank"></el-button>
                    <el-button slot="append" icon="el-icon-delete" @click="homeConfig.APP_COURSE_CATEGORY_9.configValue.splice(index, 1)"></el-button>
                  </el-input>
                  <el-tag
                    class="course-category-origin"
                    :type="item.origin === 'saas' ? 'success' : 'danger'"
                    size="mini"
                  >{{ item.origin === 'saas' ? '平台' : '单位' }}
                  </el-tag>
                </el-col>
              </draggable>
            </el-row>
            <section class="inner-explain"><i class="el-icon-warning-outline" />自定义职工端课程分类九宫格展示内容。</section>
            <section class="inner-explain">
              <i class="el-icon-warning-outline" />请尽量添加9中课程分类且分类名称字数小于8个字符，以免影响职工端展示效果。
            </section>
            <section class="inner-explain"><i class="el-icon-warning-outline" />选择课程分类后，按住分类名称左边的图标拖动可调整顺序。</section>
            <el-button
              :loading="loadingAndUpdateTimeInfo.APP_COURSE_CATEGORY_9.loading"
              style="display: block; margin: 10px auto"
              type="primary"
              @click="handleComit('APP_COURSE_CATEGORY_9')"
            >确 定
            </el-button>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 职工端首页课程展示配置   -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页课程展示配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_COURSE_CONTENT.updateTime
                ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_COURSE_CONTENT.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <course-classify-tree
              v-if="visible4coursetree"
              key="coursetree"
              :origin="addCourseOrigin"
              @close="visible4coursetree = false"
              @success="setCourseCategory"
            ></course-classify-tree>
            <div class="course-category-add course" @click=";(addCourseOrigin = 'company'), (visible4coursetree = true)">
              按本单位课程分类添加
            </div>
            <div class="course-category-add course" @click=";(addCourseOrigin = 'company'), (visible4Label = true)">
              输入本单位标签添加
            </div>
            <div class="course-category-add course" @click=";(addCourseOrigin = 'saas'), (visible4coursetree = true)">
              按平台课程分类添加
            </div>
            <div class="course-category-add course" @click=";(addCourseOrigin = 'saas'), (visible4Label = true)">
              输入平台标签添加
            </div>
            <el-form ref="courseForm" :rules="courseRules" :model="homeConfig.APP_COURSE_CONTENT">
              <el-table
                :header-cell-class-name="starAdd"
                class="course-category-table"
                :data="homeConfig.APP_COURSE_CONTENT.configValue"
                stripe
                style="width: 100%"
              >
                <el-table-column prop="moduleName" label="模块名称">
                  <template slot-scope="scope">
                    <el-form-item :prop="'configValue.' + scope.$index + '.moduleName'" :rules="courseRules.moduleName">
                      <el-input v-model="scope.row.moduleName" style="margin-top: 20px"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="type" :formatter="getType" label="模块类型"> </el-table-column>
                <el-table-column prop="typeValue" :formatter="getTypeValue" label="所属分类/标签"> </el-table-column>
                <el-table-column prop="moduleName" label="展示Id">
                  <template slot-scope="scope">
                    <el-form-item :prop="'configValue.' + scope.$index + '.showId'" :rules="courseRules.showId">
                      <el-input v-model="scope.row.showId" style="margin-top: 20px"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="moduleName" label="展示数量">
                  <template slot-scope="scope">
                    <el-form-item :prop="'configValue.' + scope.$index + '.num'" :rules="courseRules.num">
                      <el-input v-model="scope.row.num" style="margin-top: 20px" type="number"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="moduleName" label="更多跳转地址">
                  <template slot-scope="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.jumpUrl" style="margin-top: 20px"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="moduleName" label="接口地址">
                  <template slot-scope="scope">
                    <el-form-item>
                      <el-input v-model="scope.row.port" style="margin-top: 20px"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="60" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleDeleteIndexCourse(scope)">删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            <section class="inner-explain"><i class="el-icon-warning-outline" />自定义职工端首页课程展示内容。</section>
            <el-button
              :loading="loadingAndUpdateTimeInfo.APP_COURSE_CONTENT.loading"
              style="display: block; margin: 10px auto"
              type="primary"
              @click="handleComit('APP_COURSE_CONTENT')"
            >确 定
            </el-button>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 闯关练兵设置   -->
    <!--    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            闯关练兵设置
            <el-tag
              size="mini"
            >每日答题上次设置时间：{{
              loadingAndUpdateTimeInfo.APP_HOME_EVERY_CONFIRM.updateTime ? loadingAndUpdateTimeInfo.APP_HOME_EVERY_CONFIRM.updateTime : '未设置'
            }}&nbsp;&nbsp; 每日答题标语上次设置时间：{{
              loadingAndUpdateTimeInfo.APP_HOME_EVERY_RUSH_DESC.updateTime
                ? loadingAndUpdateTimeInfo.APP_HOME_EVERY_RUSH_DESC.updateTime
                : '未设置'
            }}&nbsp;&nbsp; 答题活动上次设置时间：{{
              loadingAndUpdateTimeInfo.APP_HOME_BREAK_THROUGH_AVTIVITY.updateTime
                ? loadingAndUpdateTimeInfo.APP_HOME_BREAK_THROUGH_AVTIVITY.updateTime
                : '未设置'
            }}&nbsp;&nbsp; 答题活动标语上次设置时间：{{
              loadingAndUpdateTimeInfo.APP_HOME_BREAK_THROUGH_DESC.updateTime
                ? loadingAndUpdateTimeInfo.APP_HOME_BREAK_THROUGH_DESC.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <el-form label-position="right" label-width="180px">
              <el-form-item label="职工端首页每日答题">
                <el-input v-model="homeConfig.APP_HOME_EVERY_CONFIRM.configValue.name" readonly style="width: 50%" placeholder="" />
                <el-button type="primary" @click=";(chooseType = 'everyday'), (visible4Cg = true)">选择关口 </el-button>
                <el-button
                  :loading="loadingAndUpdateTimeInfo.APP_HOME_EVERY_CONFIRM.loading"
                  type="primary"
                  @click="handleComit('APP_HOME_EVERY_CONFIRM')"
                >确 定
                </el-button>
              </el-form-item>
              <el-form-item label="职工端首页每日答题标语">
                <el-input v-model="homeConfig.APP_HOME_EVERY_RUSH_DESC.configValue" style="width: 50%" placeholder="" />
                <el-button
                  :loading="loadingAndUpdateTimeInfo.APP_HOME_EVERY_RUSH_DESC.loading"
                  type="primary"
                  @click="handleComit('APP_HOME_EVERY_RUSH_DESC')"
                >确 定
                </el-button>
              </el-form-item>
              <el-form-item label="职工端首页答题活动">
                <el-input v-model="homeConfig.APP_HOME_BREAK_THROUGH_AVTIVITY.configValue.name" readonly style="width: 50%" placeholder="" />
                <el-button type="primary" @click=";(chooseType = 'special'), (visible4Cg = true)">选择关口 </el-button>
                <el-button
                  :loading="loadingAndUpdateTimeInfo.APP_HOME_BREAK_THROUGH_AVTIVITY.loading"
                  type="primary"
                  @click="handleComit('APP_HOME_BREAK_THROUGH_AVTIVITY')"
                >确 定
                </el-button>
              </el-form-item>
              <el-form-item label="职工端首页答题活动标语">
                <el-input v-model="homeConfig.APP_HOME_BREAK_THROUGH_DESC.configValue" style="width: 50%" placeholder="" />
                <el-button
                  :loading="loadingAndUpdateTimeInfo.APP_HOME_BREAK_THROUGH_DESC.loading"
                  type="primary"
                  @click="handleComit('APP_HOME_BREAK_THROUGH_DESC')"
                >确 定
                </el-button>
              </el-form-item>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>-->
    <!-- 每日工匠设置   -->
    <!-- <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            每日工匠人物设置
            <el-tag size="mini"
            >每日工匠人物上次设置时间：{{
                loadingAndUpdateTimeInfo.APP_HOME_EVERY_CRAFTSMAN.updateTime
                    ? loadingAndUpdateTimeInfo.APP_HOME_EVERY_CRAFTSMAN.updateTime
                    : "未设置"
              }}&nbsp;&nbsp;
            </el-tag>
          </template>
          <section class="card-inner">
            <el-form label-position="right" label-width="180px">
              <el-form-item label="职工端首页每日工匠人物">
                <el-input
                    v-model="homeConfig.APP_HOME_EVERY_CRAFTSMAN.configValue.name"
                    readonly
                    style="width: 50%"
                    placeholder=""
                />
                <el-button
                    type="primary"
                    @click="visible4craftsman = true"
                >选择工匠人物
                </el-button>
                <el-button
                    :loading="
                    loadingAndUpdateTimeInfo.APP_HOME_EVERY_CRAFTSMAN.loading
                  "
                    type="primary"
                    @click="handleComit('APP_HOME_EVERY_CRAFTSMAN')"
                >确 定
                </el-button>
              </el-form-item>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section> -->
    <!-- 职工端首页创新工作室设置   -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页创新工作室设置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_WORKER_STUDIO_CONTENT.updateTime
                ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_WORKER_STUDIO_CONTENT.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <div class="course-category-add" @click=";(visible4Choose = true), (chooseType = 'workRoom')">
              添加创新工作室
            </div>
            <el-form style="margin-top: 20px" :model="homeConfig.APP_WORKER_STUDIO_CONTENT" label-position="right" label-width="130px">
              <el-table :data="homeConfig.APP_WORKER_STUDIO_CONTENT.configValue" stripe style="width: 100%">
                <el-table-column prop="name" label="工作室名称" />
                <el-table-column label="操作" align="center" min-width="60" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleDeleteIndex4Type(scope)">删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                :loading="loadingAndUpdateTimeInfo.APP_WORKER_STUDIO_CONTENT.loading"
                style="display: block; margin: 10px auto"
                type="primary"
                @click="handleComit('APP_WORKER_STUDIO_CONTENT')"
              >确 定
              </el-button>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 职工端首页外链配置-->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页外链配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_HOME_OUTSIDE_LINK.updateTime
                ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_HOME_OUTSIDE_LINK.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <div class="course-category-add" style="margin-bottom: 20px" @click="showCopy = true">
              上传图片
            </div>
            <el-form :model="homeConfig.APP_HOME_OUTSIDE_LINK" label-position="right" label-width="130px">
              <el-form-item label="首页外链配置" prop="configValue">
                <json-editor
                  v-model="homeConfig.APP_HOME_OUTSIDE_LINK.configValue"
                  style="height: 500px"
                  :value="homeConfig.APP_HOME_OUTSIDE_LINK.configValue"
                  :show-btns="false"
                  :mode="'code'"
                  lang="zh"
                  @has-error="
                    (err) => {
                      jsonHasErr = err
                    }
                  "
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  :loading="loadingAndUpdateTimeInfo.APP_HOME_OUTSIDE_LINK.loading"
                  style="display: block; margin: 10px auto"
                  type="primary"
                  @click="handleComit('APP_HOME_OUTSIDE_LINK')"
                >确 定
                </el-button>
              </el-form-item>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!--首页每周重点配置    -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            首页每周重点配置
          </template>
          <section class="card-inner">
            <section class="set-card">
              <el-collapse>
                <el-collapse-item v-for="(i, index) in weekConfigList" :key="index" style="border-bottom:1px solid #ececec;margin-bottom:5px;">
                  <template slot="title">
                    {{ i.title }}
                    <el-tag
                      size="mini"
                    >{{ weekConfigUpdateTime['type' + i.setType] ? '上次设置时间：' + weekConfigUpdateTime['type' + i.setType] : '未设置' }}
                    </el-tag>
                  </template>
                  <section class="card-inner">
                    <Calendar :btn-type="i.btnType" :set-type="i.setType" @updateTime="queryUpdateTime"></Calendar>
                  </section>
                </el-collapse-item>
              </el-collapse>
              <!--胶囊图配置-->
              <CapsuleFigure></CapsuleFigure>
            </section>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 首页快捷入口 -->
    <!-- <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页快捷入口设置
            <el-tag size="mini">{{
              loadingAndUpdateTimeInfo.APP_HOME.updateTime
                ? "上次设置时间：" +
                  loadingAndUpdateTimeInfo.APP_HOME.updateTime
                : "未设置"
            }}</el-tag>
          </template>
          <section class="card-inner">
            <section class="inner-txt">
              <el-tag
                >自定义职工端首页快捷入口的展示项和顺序。可通过鼠标拖动进行调整。</el-tag
              >
            </section>
            <section
              class="inner-draggable"
              style="
                display: flex;
                justify-content: space-around;
                margin-top: 10px;
                width: 100%;
              "
            >
              <v-draggable
                :key="1"
                :number="1"
                :list="homeConfig.APP_HOME.configValue[0].list"
                group="menu"
                class="draggable-item"
                header-text="第一屏"
                @edit="handleEdit"
              />
              <v-draggable
                :key="2"
                :number="2"
                :list="homeConfig.APP_HOME.configValue[1].list"
                group="menu"
                class="draggable-item"
                header-text="第二屏"
                @edit="handleEdit"
              />
              <v-draggable
                :key="3"
                :number="3"
                :list="homeConfig.APP_HOME.configValue[2].list"
                group="menu"
                class="draggable-item"
                header-text="第三屏"
                @edit="handleEdit"
              />
            </section>
            <el-button
              :loading="loadingAndUpdateTimeInfo.APP_HOME.loading"
              type="primary"
              style="display: block; margin: 10px auto"
              @click="handleComit('APP_HOME')"
              >确 定
            </el-button>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section> -->

    <!-- 职工端首页弹窗配置   -->
    <section class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            职工端首页弹窗配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.APP_SYTCTX.updateTime
                ? '上次设置时间：' + loadingAndUpdateTimeInfo.APP_SYTCTX.updateTime
                : '未设置'
            }}
            </el-tag>
          </template>
          <section class="card-inner" width="50%">
            <el-row :gutter="20" class="select-course-category">
              <el-col :span="24">
                <div
                  class="course-category-add course"
                  @click="addHomeDialog"
                >
                  添加首页弹窗
                </div>
              </el-col>
              <draggable
                v-model="homeConfig.APP_SYTCTX.configValue"
                :animation="340"
                handle=".course-category-move"
                draggable=".drag-item"
              >
                <el-col v-for="(item, index) in homeConfig.APP_SYTCTX.configValue" :key="index" class="drag-item" :span="8">
                  <el-input v-model="item.name"  placeholder="" readonly>
                    <el-button slot="prepend" class="course-category-move" icon="el-icon-rank"></el-button>
                    <el-button slot="append" icon="el-icon-edit" @click="getHdData(index)"></el-button>
                    <el-button slot="append" icon="el-icon-delete" @click="delHdData(index)"></el-button>
                  </el-input>
                </el-col>
              </draggable>
            </el-row>
            <section class="inner-explain"><i class="el-icon-warning-outline" />自定义职工端首页弹窗。</section>
            <section class="inner-explain"><i class="el-icon-warning-outline" />按住弹窗名称左边的图标拖动可调整顺序。</section>
            <el-button
              :loading="loadingAndUpdateTimeInfo.APP_SYTCTX.loading"
              style="display: block; margin: 10px auto"
              type="primary"
              @click="handleComit('APP_SYTCTX')"
            >确 定
            </el-button>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>

    <!-- 首页配置的弹窗-->
    <el-dialog :close-on-click-modal="false" :visible.sync="visible4HD" title="弹窗配置" width="1000px" center>
      <home-dialog v-if="visible4HD" ref="homeDialog" :obj="hdData" @send="homeDialogBack"></home-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="visible4HD = false">取 消 </el-button>
        <el-button type="primary" @click="handleHomeSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择关口的弹窗-->
    <el-dialog :close-on-click-modal="false" custom-class="cg-dialog" :visible.sync="visible4Cg" title="选择关口" width="1200px" center>
      <emigrated v-if="visible4Cg" :type="chooseType" @select="handleChoose" @radio="handleRadio" />
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="visible4Cg = false">取 消 </el-button>
        <el-button type="primary" @click="setChooseData()">确 定</el-button>
      </div>
    </el-dialog>
    <!--首页金刚区设置入口弹框
-->

    <el-dialog
      v-el-drag-dialog
      :visible.sync="visible"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :show-close="false"
      :title="type == 'menu' ? '快捷入口设置' : type == 'homemenu' ? '首页金刚区设置' : '常用功能设置'"
      center
      width="600px"
    >
      <el-form ref="iform" :model="iform" :rules="rules" label-width="100px" :style="{ height: type == 'used' ? '440px;' : '340px;' }">
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="iform.name" placeholder="请输入名称" />
        </el-form-item>
        <template v-if="type == 'used'">
          <el-form-item label="简介" prop="text">
            <el-input v-model.trim="iform.text" placeholder="请输入简介" />
          </el-form-item>
          <!-- <el-form-item label="背景颜色" prop="bgcolor">
            <el-color-picker v-model="iform.bgcolor" />
          </el-form-item>-->
        </template>
        <template v-if="type !== 'service' && type !== 'serviceadd' && type !== 'tabBar'">
          <el-form-item label="链接类型" prop="type">
            <el-radio-group v-model="iform.type">
              <el-radio :label="0">无</el-radio>
              <el-radio :label="1">内部链接</el-radio>
              <el-radio :label="2">外部链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="iform.type != 0" label="链接地址" prop="path">
            <el-input v-model.trim="iform.path" placeholder="请输入链接地址" />
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-image style="width: 40px; height: 40px; vertical-align: middle" :src="iform.icon">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
            <el-button @click="addIconImg('homemenu')">点击更换图标 </el-button>
          </el-form-item>
        </template>
        <el-form-item v-if="type !== 'homemenu'" label="是否显示" prop="show">
          <el-switch v-model="iform.show" active-text="显示" inactive-text="不显示" />
        </el-form-item>
        <template v-if="type === 'used' || type === 'serviceicon' || type === 'serviceiconadd' || type === 'homemenu' || type === 'tabBar'">
          <el-form-item label="是否需要登录" prop="login">
            <el-switch v-model="iform.login" active-text="需要" inactive-text="不需要" />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="handleClose()">取 消 </el-button>
        <el-button type="primary" @click="updateData()">确 定</el-button>
      </div>
    </el-dialog>
    <!--输入标签的弹窗-->
    <el-dialog :close-on-click-modal="false" :visible.sync="visible4Label" title="输入标签" width="500" center>
      <el-form @submit.native.prevent>
        <el-form-item label="标签:">
          <el-tag
            v-for="tag in labels"
            :key="tag"
            closable
            :disable-transitions="false"
            style="margin-right: 5px; margin-bottom: 5px"
            @close="handleCloseTag(tag)"
          >{{ tag }}
          </el-tag>
          <div class="tag-input-container">
            <el-input
              ref="tagInput"
              v-model="tagInputValue"
              class="input-new-tag"
              size="small"
              maxlength="10"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <span class="tip"><i class="el-icon-info" />输入完成后请回车</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="visible4Label = false">取 消 </el-button>
        <el-button type="primary" @click="setCourse4Label()">确 定</el-button>
      </div>
    </el-dialog>
    <!--选择直播/创新工作室的弹窗-->
    <el-dialog :close-on-click-modal="false" custom-class="live-dialog" :visible.sync="visible4Choose" title="选择数据" width="1200px" center>
      <choose-list v-if="visible4Choose" :type="chooseType" @select="handleLiveChoose"></choose-list>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="visible4Choose = false">取 消 </el-button>
        <el-button type="primary" @click="handelsetChooseData()">确 定 </el-button>
      </div>
    </el-dialog>
    <!--    选择每日工匠-->
    <el-dialog :close-on-click-modal="false" custom-class="live-dialog" :visible.sync="visible4craftsman" title="选择数据" width="1200px" center>
      <choose-craftsman v-if="visible4craftsman" @select="handleCraftsmanChoose"></choose-craftsman>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" style="padding: 10px 30px" @click="visible4craftsman = false">取 消 </el-button>
      </div>
    </el-dialog>
    <copy-pic-url v-show="showCopy" :is-show="showCopy" @successCBK="showCopy = false"></copy-pic-url>

    <!--
  上传图片-->

    <image-no-cropper-upload
      v-if="uploadFile.showUpload === 2"
      ref="imageUpload"
      :accept="uploadFile.accept"
      :limit="1"
      :show-chunks="true"
      :multiple="false"
      :is-oss="uploadFile.isOss"
      :chunk-size="uploadFile.chunksize"
      :before-upload="beforeUpload"
      @close="uploadFile.showUpload = -1"
      @success="uploadSuccess"
    >
      <div slot="tip" class="upload-tip">
        <i class="el-icon-info" />
        :
        {{ uploadFile.fileType | filterTip }}
      </div>
    </image-no-cropper-upload>
  </section>
</template>
<script>
import ghhn from './../images/icon-ghhn.png'
import cxxc from './../images/icon-cxxc.png'
import zgfc from './../images/icon-zgfc.png'
import ghry from './../images/icon-ghry.png'
import hyzs from './../images/icon-hyzs.png'
import zgtp from './../images/icon-zgtp.png'
import fczj from './../images/icon-fczj.png'
import flfw from './../images/icon-flfw.png'
import xlyz from './../images/icon-xlyz.png'
import hybf from './../images/icon-hybf.png'
import zdh from './../images/icon-zdh.png'
import servicewdfl from './../images/service/wdfl.png'
import servicehdzx from './../images/service/hdzx.png'
import servicehfsj from './../images/service/hfsj.png'
import serviceghzj from './../images/service/ghzj.png'
import serviceghxw from './../images/service/ghxw.png'
import servicegg from './../images/service/gg.png'
import servicefwrx from './../images/service/fwrx.png'
import servicegaxd from './../images/service/gaxd.png'
import servicezxx from './../images/service/zxx.png'
import serviceghjz from './../images/service/ghjz.png'
import servicexfng from './../images/service/xfng.png'
import servicebmfw from './../images/service/bmfw.png'
import servicejnzq from './../images/service/jnzq.png'
import servicecglb from './../images/service/cglb.png'
import servicezxxx from './../images/service/zxxx.png'
import servicezxks from './../images/service/zxks.png'
import servicezxdt from './../images/service/zxdt.png'
import servicephb from './../images/service/phb.png'
import servicezjhd from './../images/service/zjhd.png'
import servicetphd from './../images/service/tphd.png'
import servicedcwj from './../images/service/dcwj.png'
import serviceghhn from './../images/service/ghhn.png'
import servicezcwj from './../images/service/zcwj.png'
import servicecylj from './../images/service/cylj.png'
import servicetxl from './../images/service/txl.png'
import servicebgzl from './../images/service/bgzl.png'
import servicezzjg from './../images/service/zzjg.png'
import servicehygl from './../images/service/hygl.png'
import serviceghry from './../images/service/ghry.png'
import servicedsj from './../images/service/dsj.png'
import servicecsyy from './../images/service/csyy.png'
import servicezgyy from './../images/service/zgyy.png'
import servicezgfc from './../images/service/zgfc.png'
import servicecxgzs from './../images/service/cxgzs.png'
import servicezgcx from './../images/service/zgcx.png'
import servicezdh from './../images/service/zdh.png'
import servicehyzs from './../images/service/hyzs.png'
import servicejfrw from './../images/service/jfrw.png'
import serviceflsc from './../images/service/flsc.png'
import servicexlyz from './../images/service/xlyz.png'
import servicemmxw from './../images/service/mmxw.png'
import servicebfjz from './../images/service/bfjz.png'
import servicehyww from './../images/service/hyww.png'
import serviceflfw from './../images/service/flfw.png'
import servicehdbm from './../images/service/hdbm.png'
import servicezgsw from './../images/service/zgsw.png'
import servicezgxqxz from './../images/service/zgxqxz.png'
// 新加的
import servicezgfls from './../images/service/zgfls.png'
import servicegwlb from './../images/service/gwlb.png'
import servicezbhd from './../images/service/zbhd.png'
import servicegjsg from './../images/service/gjsg.png'
import serviceghhd from './../images/service/ghhd.png'
import servicexsyzg from './../images/service/xsyzg.png'
import servicewndt from './../images/service/wndt.png'
import servicekcxx from './../images/service/kcxx.png'

import newgdh from './../images/news/newgdh.png'
import newzgfc from './../images/news/newzgfc.png'
import newghxw from './../images/news/newghxw.png'
import newgg from './../images/news/newgg.png'
import newxlyz from './../images/news/newxlyz.png'
import newhwzs from './../images/news/newhwzs.png'
import newbfjz from './../images/news/newbfjz.png'
import newflfw from './../images/news/newflfw.png'
import newzgjk from './../images/news/newzgjk.png'
import newzgsw from './../images/news/newzgsw.png'
import newzzjg from './../images/news/newzzjg.png'
import newghry from './../images/news/newghry.png'
import newdsj from './../images/news/newdsj.png'
import newjnzq from './../images/news/newjnzq.png'
import newcglb from './../images/news/newcglb.png'
import newzxxx from './../images/news/newzxxx.png'
import newzxks from './../images/news/newzxks.png'
import newzxdt from './../images/news/newzxdt.png'
import newphb from './../images/news/newphb.png'
import newbmhd from './../images/news/newbmhd.png'
import newtphd from './../images/news/newtphd.png'
import newdcwj from './../images/news/newdcwj.png'
import newzgjy from './../images/news/newzgjy.png'
import newzjhd from './../images/news/newzjhd.png'
import newxfng from './../images/news/newxfng.png'
import newmmxw from './../images/news/newmmxw.png'
import newaxyz from './../images/news/newaxyz.png'
import newwdfl from './../images/news/newwdfl.png'
import newjfrw from './../images/news/newjfrw.png'
import newsc from './../images/news/newsc.png'
import newfwrx from './../images/news/newfwrx.png'
import newcylj from './../images/news/newcylj.png'
import newcgyy from './../images/news/newcgyy.png'
// import newylhz from './../images/news/newylhz.png'
import newymxd from './../images/news/newymxd.png'
import newzjbl from './../images/news/newzjbl.png'
import newzyfw from './../images/news/newzyfw.png'
// 金刚区菜单
import menusaqj from './../images/menus/aqj.png'
import menusdsw from './../images/menus/dsw.png'
import menusdtcg from './../images/menus/dtcg.png'
import menusflh from './../images/menus/flh.png'
import menusjnk from './../images/menus/jnk.png'
import menusshq from './../images/menus/shq.png'
import menusugb from './../images/menus/ugb.png'
import menuszb from './../images/menus/zb.png'
import menusjnds from './../images/menus/jnds.png'
import { exportSign } from '@/utils/fileImportOrExportSign'
import CopyPicUrl from '@/components/upload/copyPicUrl'
import { setDataByType, getDataByType, queryNewTypes, weekFocueUpdateTime } from './../api'
import Emigrated from '@/views/config/pagestyle/components/emigrated'
import ImageCropper from '@/components/ImageCropper'
import ChooseList from '../components/chooseList'
import ChooseCraftsman from '../components/chooseCraftsman'
import JsonEditor from '@/components/JsonEditor'
import CourseClassifyTree from '../components/CourseClassifyTree'
import VDraggable from './../components/draggable'
import VDrag from './../components/drag'
import draggable from 'vuedraggable'
import elDragDialog from '@/directive/el-drag-dialog'
// 胶囊图
import CapsuleFigure from '@/views/config/pagestyle/components/capsuleFigure'
import Calendar from '../components/calendar'
import ImageNoCropperUpload from '@/components/ImageNoCropperUpload'
import HomeDialog from '../components/HomeDialog'

export default {
  name: 'HomeConfig',
  components: {
    Emigrated,
    ImageCropper,
    CopyPicUrl,
    ChooseList,
    ChooseCraftsman,
    JsonEditor,
    CourseClassifyTree,
    draggable,
    VDrag,
    VDraggable,
    CapsuleFigure,
    Calendar,
    ImageNoCropperUpload,
    HomeDialog
  },
  directives: {
    elDragDialog
  },
  filters: {
    filterTip(ft) {
      if (ft === 'image') {
        return '只能上传：1M内的图片文件'
      } else if (ft === 'video') {
        return '只能上传：视频文件'
      } else {
        return '请上传附件'
      }
    }
  },
  data() {
    return {
      form: {},
      visible4Cg: false,
      chooseList: [],
      chooseType: '',
      upload4applogo: {
        // 客户端首页logo
        viewId: 'APP_HOME_LOGO',
        uploadaction: '/API-ENTERPRISE-BACKEND/backend/sys/sysConfig/fileUploadByName?name=APP_HOME_LOGO',
        view: '/API-ENTERPRISE-BACKEND/backend/sys/sysConfig/fileDownloadByName',
        default: require('./../images/app-logo.png'),
        isSign: true,
        signImgSrc: '/API-ENTERPRISE-BACKEND/backend/sys/sysConfig/fileDownloadByName' + exportSign({ name: 'APP_HOME_LOGO' }).paramStr,
        change: () => {
          this.upload4applogo.signImgSrc = this.upload4applogo.view + exportSign({ name: this.upload4applogo.viewId }).paramStr
          this.getSystemData('APP_HOME_LOGO')
        }
      },
      group: 'menu',
      iform: {
        id: '',
        name: '',
        text: '',
        type: 1,
        path: '',
        icon: '',
        show: false,
        bgcolor: '',
        login: false,
        themeOne: '',
        themeTwo: '',
        themeThree: ''
      },
      visible4Label: false,
      visible4Choose: false,
      showCopy: false,
      visible4coursetree9: false,
      visible4coursetree: false,
      visible4craftsman: false,
      visible4HD: false,
      hdData: {},
      hdIndex: -1,
      courseRules: {
        moduleName: [{ required: true, message: '请输入模块名称', trigger: 'blur' }],
        showId: [{ required: true, message: '请输入展示Id', trigger: 'blur' }],
        num: [{ required: true, message: '请输入展示数量', trigger: 'blur' }],
        jumpUrl: [{ required: true, message: '请输入跳转地址', trigger: 'blur' }],
        port: [{ required: true, message: '请输入接口地址', trigger: 'blur' }]
      },
      homeConfig: {
        // 职工端首页logo
        APP_HOME_LOGO: {
          configValue: ''
        },
        //  每日闯关
        APP_HOME_EVERY_CONFIRM: {
          configValue: {}
        },
        //   职工端首页每日答题标语
        APP_HOME_EVERY_RUSH_DESC: {
          configValue: ''
        },
        //   职工端首页专项答题
        APP_HOME_BREAK_THROUGH_AVTIVITY: {
          configValue: { name: '', id: '' }
        },
        //   职工端首页每日工匠
        // APP_HOME_EVERY_CRAFTSMAN: {
        //   configValue: { name: "", id: "" },
        // },
        //  职工端首页专项答题标语
        APP_HOME_BREAK_THROUGH_DESC: {
          configValue: ''
        },
        // 金刚区
        APP_HOME_MENU: {
          configValue: []
        },
        // 首页快捷入口
        // APP_HOME: {
        //   configValue: [
        //     {
        //       page: 1,
        //       list: [
        //         {
        //           id: 1,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 2,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 3,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 4,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 5,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "hyzs",
        //           show: true,
        //         },
        //         {
        //           id: 6,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 7,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 8,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 9,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 10,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //       ],
        //     },
        //     {
        //       page: 2,
        //       list: [
        //         {
        //           id: 1,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 2,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 3,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 4,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 5,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "hyzs",
        //           show: true,
        //         },
        //         {
        //           id: 6,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 7,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 8,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 9,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 10,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //       ],
        //     },
        //     {
        //       page: 3,
        //       list: [
        //         {
        //           id: 1,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 2,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 3,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 4,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 5,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "hyzs",
        //           show: true,
        //         },
        //         {
        //           id: 6,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 7,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 8,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 9,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //         {
        //           id: 10,
        //           name: "占位菜单",
        //           type: 1,
        //           path: "",
        //           icon: "",
        //           show: true,
        //         },
        //       ],
        //     },
        //   ],
        // },
        // 新闻分类
        APP_NEW_CLASSIFY_NAME: {
          configValue: []
        },
        // 九宫格
        APP_COURSE_CATEGORY_9: {
          configValue: []
        },
        // 首页课程展示配置
        APP_COURSE_CONTENT: {
          configValue: []
        },
        // 首页直播配置
        APP_LIVE_BOOK_CONTENT: {
          configValue: []
        },
        // 首页创新工作室配置
        APP_WORKER_STUDIO_CONTENT: {
          configValue: []
        },
        // 首页外部链接配置
        APP_HOME_OUTSIDE_LINK: {
          configValue: []
        },
        // 首页弹窗配置
        APP_SYTCTX: {
          configValue: []
        }
      },
      loadingAndUpdateTimeInfo: {
        // 职工端首页logo
        APP_HOME_LOGO: {
          loading: false,
          updateTime: ''
        },
        //  每日闯关
        APP_HOME_EVERY_CONFIRM: {
          loading: false,
          updateTime: ''
        },
        //   职工端首页每日答题标语
        APP_HOME_EVERY_RUSH_DESC: {
          loading: false,
          updateTime: ''
        },
        //   职工端首页专项答题
        APP_HOME_BREAK_THROUGH_AVTIVITY: {
          loading: false,
          updateTime: ''
        },
        //  职工端首页专项答题标语
        APP_HOME_BREAK_THROUGH_DESC: {
          loading: false,
          updateTime: ''
        },
        //  职工端首页每日工匠
        // APP_HOME_EVERY_CRAFTSMAN: {
        //   loading: false,
        //   updateTime: "",
        // },
        // 金刚区
        APP_HOME_MENU: {
          loading: false,
          updateTime: ''
        },
        // 首页快捷入口
        APP_HOME: {
          loading: false,
          updateTime: ''
        },
        // 新闻分类
        APP_NEW_CLASSIFY_NAME: {
          loading: false,
          updateTime: ''
        },
        // 九宫格
        APP_COURSE_CATEGORY_9: {
          loading: false,
          updateTime: ''
        },
        // 首页课程展示配置
        APP_COURSE_CONTENT: {
          loading: false,
          updateTime: ''
        },
        // 首页直播配置
        APP_LIVE_BOOK_CONTENT: {
          loading: false,
          updateTime: ''
        },
        // 首页创新工作室配置
        APP_WORKER_STUDIO_CONTENT: {
          loading: false,
          updateTime: ''
        },
        // 首页外部链接配置
        APP_HOME_OUTSIDE_LINK: {
          loading: false,
          updateTime: ''
        },
        // 首页弹窗配置
        APP_SYTCTX: {
          loading: false,
          updateTime: ''
        }
      },
      chooseLiveList: [],
      visible: false,
      type: '',
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        text: [
          {
            required: true,
            message: '请输入简介',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择链接类型',
            trigger: 'blur'
          }
        ],
        path: [
          {
            required: true,
            message: '请输入链接地址',
            trigger: 'blur'
          }
        ],
        icon: [
          {
            required: true,
            message: '请选择图标',
            trigger: 'blur'
          }
        ],
        show: [
          {
            required: true,
            message: '请选择是否显示',
            trigger: 'blur'
          }
        ],
        bgcolor: [
          {
            required: true,
            message: '请选择背景颜色',
            trigger: 'blur'
          }
        ],
        themeOne: [
          {
            required: true,
            message: '请选择选中图标1',
            trigger: 'blur'
          }
        ],
        themeTwo: [
          {
            required: true,
            message: '请选择选中图标2',
            trigger: 'blur'
          }
        ],
        themeThree: [
          {
            required: true,
            message: '请选择选中图标3',
            trigger: 'blur'
          }
        ]
      },
      iconvisible: false,
      icons: [
        {
          label: ghhn,
          value: 'ghhn'
        },
        {
          label: cxxc,
          value: 'cxxc'
        },
        {
          label: zgfc,
          value: 'zgfc'
        },
        {
          label: ghry,
          value: 'ghry'
        },
        {
          label: hyzs,
          value: 'hyzs'
        },
        {
          label: zgtp,
          value: 'zgtp'
        },
        {
          label: fczj,
          value: 'fczj'
        },
        {
          label: flfw,
          value: 'flfw'
        },
        {
          label: xlyz,
          value: 'xlyz'
        },
        {
          label: hybf,
          value: 'hybf'
        },
        {
          label: zdh,
          value: 'zdh'
        },
        {
          label: servicezgxqxz,
          value: 'servicezgxqxz'
        }
      ],
      labels: [],
      tagInputValue: '',
      addCourseOrigin: '',
      newTypeMap: {},
      tableData: [],
      weekConfigList: [
        {
          title: '每日云听配置',
          setType: 1,
          btnType: 1
        },
        {
          title: '今日匠星配置',
          setType: 2,
          btnType: 2
        },
        {
          title: '工具资源包配置',
          setType: 3,
          btnType: 3
        }
      ],
      weekConfigUpdateTime: {},
      uploadFile: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0,
        showUpload: -1, // 1视频 2图片 3附件
        accept: '',
        fileType: '',
        fileIndex: 0,
        isOss: sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG') || false,
        uploadType: ''
      }
    }
  },
  created() {
    for (const key in this.homeConfig) {
      const isParse = typeof this.homeConfig[key].configValue === 'object'
      if (key === 'APP_NEW_CLASSIFY_NAME') {
        this.queryNewTypes().then(() => {
          this.getSystemData(key, isParse)
        })
      } else {
        this.getSystemData(key, isParse)
      }
    }
    this.queryUpdateTime()
  },
  methods: {
    //删除首页弹窗
    delHdData(i){
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.homeConfig.APP_SYTCTX.configValue.splice(i, 1)
        this.hdData = {}
        this.hdIndex = -1
      }).catch(() => {
      });
    },
    //编辑首页弹窗
    getHdData(i){
      this.hdData = this.homeConfig.APP_SYTCTX.configValue[i]
      this.hdIndex = i
      this.visible4HD = true
    },
    //添加首页弹窗
    addHomeDialog() {
      this.hdData = {}
      this.hdIndex = -1
      this.visible4HD = true
    },
    //首页弹窗回调
    homeDialogBack(data) {
      if (this.hdIndex === -1) {
        this.homeConfig.APP_SYTCTX.configValue.push(data)
      } else {
        this.homeConfig.APP_SYTCTX.configValue[this.hdIndex] = data
      }
      this.hdData = {}
      this.hdIndex = -1
      this.visible4HD = false
    },
    handleHomeSubmit() {
      this.$refs.homeDialog.onSubmit()
    },
    queryUpdateTime() {
      weekFocueUpdateTime().then((res) => {
        if (res.data.code === '200') {
          this.weekConfigUpdateTime = res.data.data
        }
      })
    },
    getSystemData(type, isParse = false) {
      return new Promise((resolve, reject) => {
        getDataByType({
          name: type
        })
          .then((res) => {
            try {
              this.homeConfig[type].configValue = isParse ? JSON.parse(res.data.data.configValue) : res.data.data.configValue
              // if(type==='APP_HOME_LOGO'){
              //  this. upload4applogo.viewId=res.data.data.configValue
              // }
              if (type === 'APP_NEW_CLASSIFY_NAME') {
                this.newTypeMap = { ...this.homeConfig[type].configValue }
                this.handleNewTypeMap()
              }
              this.loadingAndUpdateTimeInfo[type].updateTime = res.data.data.updTime
            } catch (error) {}
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    handleComit(type) {
      const name = type
      let value

      const isParse = typeof this.homeConfig[type].configValue === 'object'
      if (type === 'APP_NEW_CLASSIFY_NAME') {
        value = this.formattingTableData(this.tableData)
      } else {
        value = this.homeConfig[type].configValue
      }
      value = isParse ? JSON.stringify(value) : value
      this.loadingAndUpdateTimeInfo[type].loading = true
      return new Promise((resolve, reject) => {
        setDataByType({
          configName: name,
          configValue: value
        })
          .then((res) => {
            this.loadingAndUpdateTimeInfo[type].loading = false
            this.$message({
              title: '成功',
              message: '设置成功',
              type: 'success',
              duration: 1500
            })

            this.getSystemData(type, isParse)
          })
          .catch((e) => {
            this.loadingAndUpdateTimeInfo[type].loading = false
            reject(error)
          })
      })
    },
    handleChoose(arr) {
      if (arr.length > 1) {
        this.$message.error('最多选择一个关口')
        return
      }

      this.chooseList = arr
    },
    handleLiveChoose(arr) {
      if (this.chooseType === 'workRoom' || this.chooseType === 'live') {
        this.chooseLiveList = arr
        return
      }
    },
    handleCraftsmanChoose(info) {
      this.homeConfig.APP_HOME_EVERY_CRAFTSMAN.configValue = info
      this.visible4craftsman = false
    },
    handleRadio(item) {
      this.chooseList = []
      this.chooseList.push(item)
    },
    setChooseData() {
      if (this.chooseList.length > 1) {
        this.$message.error('最多选择一个关口')
        return
      }
      const item = this.chooseList[0]
      if (this.chooseType === 'everyday') {
        // 每日答题
        this.homeConfig.APP_HOME_EVERY_CONFIRM.configValue.name = item.dailyName
        this.homeConfig.APP_HOME_EVERY_CONFIRM.configValue.id = item.id
      } else {
        this.homeConfig.APP_HOME_BREAK_THROUGH_AVTIVITY.configValue.name = item.name
        this.homeConfig.APP_HOME_BREAK_THROUGH_AVTIVITY.configValue.id = item.id
      }
      this.visible4Cg = false
    },
    handelsetChooseData() {
      const msg = this.chooseType === 'live' ? '直播' : '创新工作室'
      if (this.chooseLiveList.length === 0) {
        this.$message.error(`请选择${msg}`)
        return
      }
      const data =
        this.chooseType === 'live' ? this.homeConfig.APP_LIVE_BOOK_CONTENT.configValue : this.homeConfig.APP_WORKER_STUDIO_CONTENT.configValue
      const ids = data.map((a) => {
        return a.id
      })
      for (let i = 0; i < this.chooseLiveList.length; i++) {
        const item = this.chooseLiveList[i]
        const name = this.chooseType === 'live' ? item.liveName : item.mainTitle
        if (ids.indexOf(item.id) > -1) {
          this.$message.error(`${msg}：[${name}]已经选过了`)
          return
        }
        if (this.chooseType === 'live') {
          this.homeConfig.APP_LIVE_BOOK_CONTENT.configValue.push({
            id: item.id,
            name: item.liveName,
            type: '1' // 1系统内2系统外
          })
        } else if (this.chooseType === 'workRoom') {
          this.homeConfig.APP_WORKER_STUDIO_CONTENT.configValue.push({
            id: item.id,
            name: item.mainTitle
          })
        }
      }
      this.visible4Choose = false
    },
    updateData() {
      this.$refs['iform'].validate((valid) => {
        if (valid) {
          if (this.si === -1) {
            const obj = Object.assign({}, this.iform)
            this.tabBarList.push(obj)
            this.si = ''
            this.visible = false
            return
          }
          if (this.number === 1 || this.number === '1') {
            this.homeConfig.APP_HOME.configValue[0].list.forEach((item) => {
              if (item.id === this.iform.id) {
                item.name = this.iform.name
                item.type = this.iform.type

                item.path = this.iform.path
                item.icon = this.iform.icon
                item.show = this.iform.show
              }
              return
            })
          } else if (this.number === 2 || this.number === '2') {
            this.homeConfig.APP_HOME.configValue[1].list.forEach((item) => {
              if (item.id === this.iform.id) {
                item.name = this.iform.name
                item.type = this.iform.type
                item.path = this.iform.path
                item.icon = this.iform.icon
                item.show = this.iform.show
              }
              return
            })
          } else if (this.number === 3 || this.number === '3') {
            this.homeConfig.APP_HOME.configValue[2].list.forEach((item) => {
              if (item.id === this.iform.id) {
                item.name = this.iform.name
                item.type = this.iform.type
                item.path = this.iform.path
                item.icon = this.iform.icon
                item.show = this.iform.show
              }
              return
            })
          } else if (this.number === 4 || this.number === '4') {
            // this.listusedone.forEach((item) => {
            //   if (item.id === this.iform.id) {
            //     item.name = this.iform.name;
            //     item.text = this.iform.text;
            //     item.type = this.iform.type;
            //     item.path = this.iform.path;
            //     item.icon = this.iform.icon;
            //     item.show = this.iform.show;
            //     item.bgcolor = this.iform.bgcolor;
            //     item.login = this.iform.login;
            //   }
            //   return;
            // });
          } else if (this.number === 5 || this.number === '5') {
            // this.listusedtwo.forEach((item) => {
            //   if (item.id === this.iform.id) {
            //     item.name = this.iform.name;
            //     item.text = this.iform.text;
            //     item.type = this.iform.type;
            //     item.path = this.iform.path;
            //     item.icon = this.iform.icon;
            //     item.show = this.iform.show;
            //     item.bgcolor = this.iform.bgcolor;
            //     item.login = this.iform.login;
            //   }
            //   return;
            // });
          } else if (this.number === 7 || this.number === '7') {
            console.log('iform', this.iform)
            this.homeConfig.APP_HOME_MENU.configValue.forEach((item) => {
              if (item.id === this.iform.id) {
                item.name = this.iform.name
                item.type = this.iform.type
                item.path = this.iform.path
                item.icon = this.iform.icon
                item.show = this.iform.show
                item.login = this.iform.login
              }
              return
            })
          } else if (this.number === 6 || this.number === '6') {
            if (this.type === 'service') {
              this.listservice.forEach((item) => {
                if (item.id === this.iform.id) {
                  item.name = this.iform.name
                  item.show = this.iform.show
                }
                return
              })
            } else if (this.type === 'serviceadd') {
              this.listservice.push({
                id: this.listservice.length + 1,
                name: this.iform.name,
                show: this.iform.show,
                list: []
              })
            } else if (this.type === 'serviceicon') {
              // this.listservice[this.si].list.forEach((item) => {
              //   if (item.id === this.iform.id) {
              //     item.name = this.iform.name;
              //     item.type = this.iform.type;
              //     item.text = this.iform.type;
              //     item.path = this.iform.path;
              //     item.icon = this.iform.icon;
              //     item.show = this.iform.show;
              //     item.login = this.iform.login;
              //   }
              //   return;
              // });
            } else if (this.type === 'serviceiconadd') {
              // this.listservice.forEach((item, index) => {
              //   if (index === this.si) {
              //     const obj = {
              //       id: item.list.length + 1,
              //       name: this.iform.name,
              //       text: this.iform.type,
              //       path: this.iform.path,
              //       icon: this.iform.icon,
              //       show: this.iform.show,
              //       login: this.iform.login,
              //     };
              //     item.list.push(obj);
              //   }
              //   return;
              // });
            }
          }
          this.visible = false
        } else {
          return false
        }
      })
    },
    handleSelectIcon(item) {
      this.iform.icon = item.value
      if (this.type === 'used') {
        this.iform.bgcolor = item.color
      }
      this.iconvisible = false
    },
    handleClose(falg) {
      if (!falg) {
        this.visible = false
      }
      this.visible = false
      this.iconvisible2 = false
      this.iconvisible3 = false
      this.iconvisible1 = false
      this.iconvisible = false
      this.si = ''
    },
    handleEdit(data) {
      const { n, r, t } = data
      this.iform = Object.assign(this.iform, r)
      this.number = n
      this.type = t || 'menu'
      this.visible = true
    },
    setCourseCategory9(arr) {
      this.homeConfig.APP_COURSE_CATEGORY_9.configValue = [...this.homeConfig.APP_COURSE_CATEGORY_9.configValue, ...arr]
      this.visible4coursetree9 = false
    },
    getType(row) {
      const origin = row.origin === 'saas' ? '平台' : '本单位'
      const type = row.type === '1' ? '分类' : '标签'
      return origin + type
    },
    getTypeValue(row) {
      return row.type === '1' ? row.className : row.typeValue
    },
    handleDeleteIndexCourse(info) {
      this.homeConfig.APP_COURSE_CONTENT.configValue.splice(info.$index, 1)
    },
    handleDeleteIndex4Type(item, type) {
      if (type === 'live') {
        this.homeConfig.APP_LIVE_BOOK_CONTENT.configValue.splice(item.$index, 1)
      } else {
        this.homeConfig.APP_WORKER_STUDIO_CONTENT.configValue.splice(item.$index, 1)
      }
    },
    addInlet() {
      for (let i = 0; i < this.homeConfig.APP_HOME_MENU.configValue.length; i++) {
        this.$set(this.homeConfig.APP_HOME_MENU.configValue, i, Object.assign(this.homeConfig.APP_HOME_MENU.configValue[i], { id: i }))
      }
      this.homeConfig.APP_HOME_MENU.configValue.push({
        id: this.homeConfig.APP_HOME_MENU.configValue.length,
        name: '',
        type: 1,
        path: '',
        icon: '',
        login: false,
        show: true
      })
    },
    starAdd(obj) {
      if (obj.columnIndex !== 1 && obj.columnIndex !== 2 && obj.columnIndex !== 5 && obj.columnIndex !== 6 && obj.columnIndex !== 7) {
        return 'star'
      }
    },
    deleteInlet(data) {
      const { n, r, t, i } = data
      this.homeConfig.APP_HOME_MENU.configValue.splice(i, 1)
    },
    formattingTableData(data = []) {
      const value = { index: [], list: [] }
      data
        .filter((i) => i.indexStatus)
        .forEach((ite) => {
          value.index.push({
            classifyId: ite.id,
            sort: ite.indexSort || 0
          })
        })
      data
        .filter((i) => i.listStatus)
        .forEach((ite) => {
          value.list.push({
            classifyId: ite.id,
            sort: ite.listSort || 0
          })
        })

      return value
    },
    // 格式化
    handleNewTypeMap() {
      try {
        const { index, list } = this.newTypeMap
        this.tableData.forEach((item, i) => {
          index.forEach((ite) => {
            if (item.id === ite.classifyId) {
              this.$set(this.tableData[i], 'indexStatus', true)
              this.$set(this.tableData[i], 'indexSort', ite.sort)
            }
          })
          list.forEach((ite) => {
            if (item.id === ite.classifyId) {
              this.$set(this.tableData[i], 'listStatus', true)
              this.$set(this.tableData[i], 'listSort', ite.sort)
            }
          })
        })
      } catch (err) {
        console.log(err)
      }
    },
    /**
     * 确认标签输入框内容
     */
    handleInputConfirm() {
      const inputValue = this.tagInputValue.trim().replace(/,|，/g, '')
      if (inputValue) {
        this.labels.push(inputValue)
      }
      this.tagInputValue = ''
    },
    setCourse4Label(item) {
      if (this.labels.length === 0) {
        this.$message.error('请先添加标签')
        return
      }
      this.homeConfig.APP_COURSE_CONTENT.configValue.push({
        moduleName: '',
        type: '2',
        typeValue: this.labels.join(','),
        showId: '',
        num: '',
        jumpUrl: '',
        port: '',
        origin: this.addCourseOrigin
      })
      this.labels = []
      this.tagInputValue = ''
      this.visible4Label = false
    },
    setCourseCategory(arr) {
      arr.forEach((item) => {
        if (this.homeConfig.APP_COURSE_CONTENT.configValue.findIndex((ite) => ite.id === item.id) === -1) {
          this.homeConfig.APP_COURSE_CONTENT.configValue.push({
            moduleName: item.classifyName,
            type: '1',
            typeValue: item.id,
            className: item.classifyName,
            showId: '',
            num: '',
            jumpUrl: '',
            port: '',
            origin: this.addCourseOrigin
          })
        }
      })
      this.visible4coursetree = false
    },
    // 查询新闻类型配置
    queryNewTypes() {
      return new Promise((resolve, reject) => {
        queryNewTypes()
          .then((res) => {
            resolve()
            this.tableData = res.data.data
              .filter((item) => {
                return item.status === 'ZT01'
              })
              .map((item) => {
                return {
                  ...item,
                  indexStatus: false,
                  indexSort: undefined,
                  listStatus: false,
                  listSort: undefined
                }
              })
          })
          .catch((err) => {
            console.log(err)
            reject()
          })
      })
    },
    /**
     * 图片上传成功
     * */
    uploadSuccess(id, files) {
      console.log('files', id, files)
      if (id) {
        if (this.uploadFile.fileType === 'image') {
          switch (this.uploadFile.uploadType) {
            // 金刚区
            case 'homemenu':
              this.iform.icon = this.uploadFile.isOss ? files[0].ossPath : files[0].id
              break
          }
        }
      }
      this.uploadFile.showUpload = -1
    },
    /**
     *上传图标图片
     */
    addIconImg(type) {
      this.uploadFile.uploadType = type
      this.uploadFile.fileType = 'image'
      this.uploadFile.accept = 'image/*'
      this.uploadFile.showUpload = 2
    }
  }
}
</script>

<style lang="scss">
.config-home {
  padding: 10px;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: auto;

  .tip {
    font-size: 14px;
    color: $mainColor;
    margin-bottom: 10px;
  }

  &::-webkit-scrollbar {
    width: 8px;
    /*对垂直流动条有效*/
    height: 1px;
    /*对水平流动条有效*/
  }

  /** 滚动条轨道*/
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 3px;
  }

  /** 滚动条里面小方块*/
  &::-webkit-scrollbar-thumb {
    height: 32px;
    border-radius: 5px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    background-color: #eaeaea;
  }

  .set-info,
  .set-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .el-collapse {
      border-top: none;
      border-bottom: none;

      .el-collapse-item__header {
        padding-left: 10px;
        border-bottom: none;
        overflow: hidden;
        text-overflow: ellipsis;

        .el-tag {
          margin-left: 10px;
        }

        .name {
          flex-shrink: 0;
          white-space: nowrap;
        }
      }

      .el-collapse-item__content {
        padding: 10px;
      }

      .el-collapse-item__wrap {
        border-bottom: none;
        border-top: 1px solid #e6ebf5;
      }
    }
  }

  .set-card {
    margin-top: 10px;

    .news-item {
      border-bottom: 1px solid #f7f7f8;
      line-height: 35px;

      &:last-child {
        border-bottom: none;
      }
    }

    .news-add {
      cursor: pointer;
      width: 100%;
      line-height: 40px;
      text-align: center;
      border: 1px dotted #e5e5e5;

      &:hover {
        @include border-color(1px, dotted, $mainColor);
        @include font-color($mainColor);
      }
    }

    .course-category-add {
      cursor: pointer;
      width: 180px;
      line-height: 40px;
      text-align: center;
      border: 1px dotted #e5e5e5;
      font-size: 14px;
      @include border-color(1px, dotted, $mainColor);
      @include font-color($mainColor);

      &.course {
        display: inline-block;

        &:last-child {
          margin-left: 20px;
        }
      }
    }

    .course-category-table {
      margin-top: 10px;
    }

    .select-course-category {
      .el-col {
        margin-bottom: 10px;

        &.drag-item {
          position: relative;

          .course-category-origin {
            position: absolute;
            right: 70px;
            top: 50%;
            transform: translateY(-50%);
          }

          .el-input__inner {
            padding-right: 40px;
          }
        }
      }
    }
  }

  .set-info {
    .info-item {
      padding-bottom: 8px;
      vertical-align: top;
      display: flex;

      .item-label {
        color: rgba(0, 0, 0, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5715;
        text-align: start;
      }

      .item-content {
        flex: 1 1;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        line-height: 1.5715;
        word-break: break-word;
        overflow-wrap: break-word;
      }
    }
  }

  .inner-explain {
    margin-top: 10px;
    line-height: 1.1;
    color: #999;
    font-size: 14px;
    display: flex;
    align-items: flex-start;

    > i {
      margin-right: 5px;
    }

    p {
      margin: 0;
      padding: 0;
      margin-bottom: 5px;
    }
  }

  .cg-dialog {
    .el-dialog .el-dialog__body {
      padding: 0 !important;
    }
  }

  .card-inner {
    .inner-draggable {
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      align-items: flex-start;

      .draggable-item {
      }
    }
  }

  .inner-txt {
    text-align: center;
    padding: 10px 0;
  }

  .el-tag {
    white-space: nowrap;
    max-width: 900px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
